<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .con {
      width: 300px;
      height: 200px;
      border: 1px solid #ccc;
      margin: auto;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      text-align: center;
    }
    .img-div {
      width: 500px;
      margin: auto;
      display: none;
    }
  </style>
  <body>
    <div class="con">
      <div>用户名：<input type="text" id="username" /></div>
      <div>密 码： <input type="password" id="pwd" /></div>
      <div><input type="checkbox" id="keep7" />7天保持登录</div>
      <div><button id="login">登 录</button></div>
    </div>
    <div class="img-div">
      <h3></h3>
      <img
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202006%2F21%2F20200621231554_zselp.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654411838&t=a67b54cccdea162d28231be7e5b9b134"
        alt=""
        width="500"
      />
    </div>
  </body>
  <script>
    window.onload = function () {
      login.onclick = function () {
        var username = document.getElementById('username').value
        var pwd = document.getElementById('pwd').value
        var keep = document.getElementById('keep7').checked
        //存储cookie逻辑
        if (keep) {
          setCookie('username', username, 7)
          setCookie('pwd', pwd, 7)
        } else {
          setCookie('username', username)
          setCookie('pwd', pwd)
        }
        show()
      }
      show()
    }
    function show() {
      var username = getCookie('username')
      if (username) {
        document.getElementsByTagName('h3')[0].innerHTML =
          '欢迎回来，' + username
        document.getElementsByClassName('img-div')[0].style.display = 'block'
        document.getElementsByClassName('con')[0].style.display = 'none'
      } else {
        document.getElementsByTagName('h3')[0].innerHTML = ''
        document.getElementsByClassName('img-div')[0].style.display = 'none'
        document.getElementsByClassName('con')[0].style.display = 'block'
      }
    }

    //设置cookie
    /**
     *
     * 参数1 ： cookie的键名
     * 参数2： cookie的值
     * 参数三： 过期时间 1代表1天
     */
    function setCookie(cname, cvalue, exdays) {
      //日期对象
      var d = new Date()
      //设置过期的时间 获取当前时间戳 + 天数的时间戳
      d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000)
      var expires = 'expires=' + d.toUTCString()
      //设置cookie 拼接值
      document.cookie = cname + '=' + cvalue + '; ' + expires
    }
    //获取cookie
    /**
     * 参数1： cookie的键名
     */
    function getCookie(cname) {
      //拼接键名和=号
      var name = cname + '='
      //通过字符串分割把这个字符串转换成数组
      var ca = document.cookie.split(';')
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i].trim() //去除2端空白
        //检索字符串 未找到返回-1
        if (c.indexOf(name) == 0) {
          //返回 字符串截取
          return c.substring(name.length, c.length)
        }
      }
      return ''
    }
  </script>
</html>
